<template>
  <!-- <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="比赛管理" name="first"> -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="赛事名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入赛事名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="选择赛事" prop="competitionId">
        <el-select
          v-model="queryParams.competitionId"
          placeholder="请选择"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="item in playList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="比赛组别 " prop="groups">
        <el-input
          v-model="queryParams.groups"
          placeholder="请输入比赛组别 "
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="省code" prop="provinceCode">
        <el-input
          v-model="queryParams.provinceCode"
          placeholder="请输入省code"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="省份" prop="province">
        <el-select v-model="queryParams.province" placeholder="请输入省份">
          <el-option
            v-for="item in addressData"
            :key="item.code"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="市code" prop="cityCode">
        <el-input
          v-model="queryParams.cityCode"
          placeholder="请输入市code"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="市" prop="city">
        <el-input
          v-model="queryParams.city"
          placeholder="请输入市"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['game:play:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['game:play:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['game:play:remove']"
          >删除</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-download"
          size="mini"
          @click="underOrder"
          v-hasPermi="['system:shunxu:edit']"
          >导入项目模板下载</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :before-upload="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="filesuccess"
          :headers="headers"
          :data="paramsData"
          multiple
          :limit="1"
          :file-list="fileList"
        >
          <el-button size="small" type="primary" @click="UnderExportOrder"
            >上传赛事</el-button
          >
        </el-upload>
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['game:play:export']"
          >导出</el-button
        >
      </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="playList"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="id" align="center" prop="id" /> -->
      <el-table-column label="赛事名称" align="center" prop="name" />
      <el-table-column label="赛事类型 " align="center" prop="type" />
      <el-table-column
        label="比赛组别 "
        align="center"
        prop="groups"
        width="180"
        :show-overflow-tooltip="true"
      />
      <!-- <el-table-column label="省code" align="center" prop="provinceCode" />
      <el-table-column label="省份" align="center" prop="province" />
      <el-table-column label="市code" align="center" prop="cityCode" /> -->
      <el-table-column label="地址" align="center" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.province">{{
            scope.row.province +
            "/" +
            scope.row.city +
            "/" +
            (scope.row.address ? scope.row.address : "")
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="市" align="center" prop="city" /> -->

      <el-table-column label="报名起止时间" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.joinStartTime) }}</span
          ><br />
          <span>{{ parseTime(scope.row.joinEndTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="比赛时间" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime) }}</span
          ><br />
          <span>{{ parseTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="人数限制" align="center" width="180">
        <template slot-scope="scope">
          <span
            >领队人数:
            {{ scope.row.leaderSumMin + "-" + scope.row.leaderSumMax }}</span
          ><br />
          <span
            >教练员人数:
            {{ scope.row.coachSumMin + "-" + scope.row.coachSumMax }}</span
          >
          <br />
          <span
            >随队裁判人数:
            {{ scope.row.refereeSumMin + "-" + scope.row.refereeSumMax }}</span
          >
        </template>
      </el-table-column>
      <!-- <el-table-column label="住宿条件" align="center" width="180">

 </el-table-column> -->
      <el-table-column
        label="单间价格/人"
        align="center"
        prop="singleRoomPrice"
      />
      <el-table-column
        label="标间价格/人"
        align="center"
        prop="standardRoomPrice"
      />
      <el-table-column label="比赛状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag
                v-show="scope.row.status === '未开始'"
                size="medium"
                type="danger"
                >{{ scope.row.status }}</el-tag
              >
              <el-tag
                v-show="scope.row.status === '报名中'"
                size="medium"
                type=""
                >{{ scope.row.status }}</el-tag
              >
              <el-tag
                v-show="scope.row.status === '报名结束'"
                size="medium"
                type="info"
                >{{ scope.row.status }}</el-tag
              >
              <el-tag
                v-show="scope.row.status === '待开始'"
                size="medium"
                type="warning"
                >{{ scope.row.status }}</el-tag
              >
              <el-tag
                v-show="scope.row.status === '进行中'"
                size="medium"
                type="success"
                >{{ scope.row.status }}</el-tag
              >
              <el-tag
                v-show="scope.row.status === '评分中'"
                size="medium"
                type="warning"
                >{{ scope.row.status }}</el-tag
              >
              <el-tag
                v-show="scope.row.status === '已结束'"
                size="medium"
                type="info"
                >{{ scope.row.status }}</el-tag
              >
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="400"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['game:play:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="addItem(scope.row)"
            >添加项目</el-button
          >
          <!-- <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :before-upload="handlePreview"
            :on-remove="handleRemove"
            :on-success="filesuccess"
            :headers="headers"
            :data="paramsData"
            :show-file-list="false"
            multiple
            :limit="1"
          >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-upload2"
              @click="UnderExportOrder(scope.row)"
              >上传项目</el-button
            >
          </el-upload> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['game:play:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rowsPerPage"
      @pagination="getList"
    />

    <!-- 添加或修改比赛对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="open"
      width="1000px"
      append-to-body
      class="scrollbar"
    >
      <el-scrollbar style="height: 100%">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="赛事名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入赛事名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="赛事类型 " prop="type">
                <el-select v-model="form.type" placeholder="请选择赛事类型">
                  <el-option
                    v-for="dict in RaceMode"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="比赛省份">
              <el-row>
                <el-select
                  v-model="form.province"
                  placeholder="请选择省"
                  @change="changePro"
                >
                  <el-option
                    v-for="item in addressData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="form.city"
                  placeholder="请选择市"
                  @change="changeCity"
                >
                  <el-option
                    v-for="item in cityData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
                <!-- <el-select
                v-model="form.district"
                placeholder="请选择区"
                @change="changeArea"
              >
                <el-option
                  v-for="item in areaData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>-->
                <el-input
                  placeholder="详细地址"
                  v-model="form.address"
                  style="width: 200px"
                  clearable
                ></el-input>
              </el-row>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="报名时间段">
              <el-date-picker
                v-model="form.joinStartTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择报名开始时间"
              >
              </el-date-picker>
              <span class="pickerSpan"> 至 </span>
              <el-date-picker
                v-model="form.joinEndTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择报名结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>

          <el-form-item label="拟定赛事时间">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择赛事开始时间"
            >
            </el-date-picker>
            <span class="pickerSpan"> 至 </span>
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择赛事结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="比赛组别 " prop="groups">
            <el-select
              v-model="form.groups"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请输入比赛组别"
            >
              <el-option
                v-for="item in groups"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="比赛地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入比赛地址" />
          </el-form-item> -->
          <el-form-item label="赛事状态" prop="status">
            <el-radio-group v-model="form.status" size="small">
              <el-radio-button
                v-for="item in playStatus"
                :key="item.value"
                :value="item.label"
                :label="item.label"
              ></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="10">
              <el-form-item
                label="领队人数最低"
                prop="leaderSumMin"
                label-width="130px"
              >
                <el-input
                  v-model="form.leaderSumMin"
                  placeholder="请输入领队人数最低"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item> </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                label="领队人数最大"
                prop="leaderSumMax"
                label-width="130px"
              >
                <el-input
                  v-model="form.leaderSumMax"
                  placeholder="请输入领队人数最大"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item
                label="教练员人数最低"
                prop="coachSumMin"
                label-width="130px"
              >
                <el-input
                  v-model="form.coachSumMin"
                  placeholder="请输入教练员人数最低"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item> </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                label="教练员人数最大"
                prop="coachSumMax"
                label-width="130px"
              >
                <el-input
                  v-model="form.coachSumMax"
                  placeholder="请输入教练员人数最大"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item
                label="随队裁判人数最低"
                prop="refereeSumMin"
                label-width="130px"
              >
                <el-input
                  v-model="form.refereeSumMin"
                  placeholder="请输入随队裁判人数最低"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item> </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                label="随队裁判人数最大"
                prop="refereeSumMax"
                label-width="130px"
              >
                <el-input
                  v-model="form.refereeSumMax"
                  placeholder="请输入随队裁判人数最大"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item
                label="领队费/人"
                prop="leaderPrice"
                label-width="130px"
              >
                <el-input
                  v-model="form.leaderPrice"
                  placeholder="请输入领队费用/人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item> </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                label="教练费/人"
                prop="coachPrice"
                label-width="130px"
              >
                <el-input
                  v-model="form.coachPrice"
                  placeholder="请输入教练费用/人"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item
                label="单间价格/人"
                prop="singleRoomPrice"
                label-width="130px"
              >
                <el-input
                  v-model="form.singleRoomPrice"
                  placeholder="请输入单间价格/人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item> </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                label="标间价格/人"
                prop="standardRoomPrice"
                label-width="130px"
              >
                <el-input
                  v-model="form.standardRoomPrice"
                  placeholder="请输入标间价格/人"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加项目弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="projectTitle"
      :visible.sync="openItem"
      width="1000px"
      append-to-body
      class="scrollbar"
      @close="closedItem"
    >
      <el-scrollbar style="height: 100%">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="itemHandleAdd"
              v-hasPermi="['game:project:add']"
              >新增</el-button
            >
          </el-col>

          <el-col :span="1.5">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :before-upload="handlePreview"
              :on-remove="handleRemove"
              :on-success="filesuccess"
              :headers="headers"
              :data="paramsData"
              ref="upload"
              :show-file-list="false"
              multiple
              :limit="1"
            >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-upload2"
                @click="UnderExportOrder"
                >上传项目</el-button
              >
            </el-upload>
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="ItemItemMultiple"
              @click="itemHandleUpdate"
              v-hasPermi="['game:project:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="itemHandleDelete"
              v-hasPermi="['game:project:remove']"
              >删除</el-button
            >
          </el-col> -->
          <!-- <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['game:project:export']"
              >导出</el-button
            >
          </el-col> -->
          <!-- <right-toolbar
            :ItemShowSearch.sync="ItemShowSearch"
            @queryTable="itemGetList"
          ></right-toolbar> -->
        </el-row>
        <el-table
          v-loading="Itemloading"
          :data="projectList"
          @selection-change="itemHandleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <!-- <el-table-column label="id" align="center" prop="id" />
          <el-table-column
            label="比赛主键"
            align="center"
            prop="competitionId"
          /> -->
          <el-table-column label="项目" align="center" prop="name" />
          <el-table-column label="项目大类" align="center" prop="type" />
          <el-table-column
            label="运动员最小人数"
            align="center"
            prop="athleteSumMin"
          />
          <el-table-column
            label="运动员最大人数"
            align="center"
            prop="athleteSumMax"
          />
          <el-table-column label="报名费" align="center" prop="entryPrice" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="itemHandleUpdate(scope.row)"
                v-hasPermi="['game:project:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="itemHandleDelete(scope.row)"
                v-hasPermi="['game:project:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button @click="cancelProject">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 审核队伍 -->
    <!-- <el-dialog :close-on-click-modal="false"
      :title="teamTitle"
      :visible.sync="openteam"
      width="1000px"
      append-to-body
      class="scrollbar"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="队伍名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入队伍名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
       

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-scrollbar style="height: 80%">
        <el-table v-loading="teamloading" :data="teamList">
   
          <el-table-column
            label="报名信息"
            align="center"
            prop="name"
            width="300"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.createBy }}</span>
            </template>
          </el-table-column>
          <el-table-column label="赛事" align="center" prop="competitionName" />
          <el-table-column
            label="报名时间"
            align="center"
            prop="time"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.joinTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="报名状态" align="center" prop="status">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <div slot="reference" class="name-wrapper">
                  <el-tag
                    v-show="scope.row.status === '已退回'"
                    size="medium"
                    type="danger"
                    >{{ scope.row.status }}</el-tag
                  >

                  <el-tag
                    v-show="scope.row.status === '待审核'"
                    size="medium"
                    type="warning"
                    >{{ scope.row.status }}</el-tag
                  >
                  <el-tag
                    v-show="scope.row.status === '已通过'"
                    size="medium"
                    type="success"
                    >{{ scope.row.status }}</el-tag
                  >
                  <el-tag
                    v-show="scope.row.status === '待缴费'"
                    size="medium"
                    type=""
                    >{{ scope.row.status }}</el-tag
                  >
                  <el-tag
                    v-show="scope.row.status === '草稿'"
                    size="medium"
                    type="info"
                    >{{ scope.row.status }}</el-tag
                  >
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="teamHandleUpdate(scope.row)"
                v-hasPermi="['game:project:edit']"
                >审核信息</el-button
              >
     
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
   
        <el-button @click="cancelTeam">关 闭</el-button>
      </div>
    </el-dialog> -->
    <!-- 审核详细信息 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="teamDetailTitle"
      :visible.sync="teamDetailOpen"
      width="500px"
      append-to-body
    >
      <el-form
        ref="teamForm"
        :model="teamForm"
        :rules="itemRules"
        label-width="80px"
      >
        <!-- <el-form-item label="比赛主键" prop="competitionId">
          <el-input
            v-model="itemForm.competitionId"
            placeholder="请输入比赛主键"
          />
        </el-form-item> -->
        <el-form-item label="队伍名称">
          <el-input v-model="teamForm.createBy" placeholder="请输入队伍名称" />
        </el-form-item>
        <el-form-item label="报名状态" prop="status">
          <el-radio-group v-model="teamForm.status" size="small">
            <el-radio-button
              v-for="item in shenheStatus"
              :key="item.value"
              :value="item.label"
              :label="item.label"
            ></el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="费用" prop="entryPrice">
          <el-input v-model="teamForm.cost" placeholder="请输入报名费" />
        </el-form-item>
        <!-- <el-form-item label="排序字段" prop="sort">
          <el-input v-model="itemForm.sort" placeholder="请输入排序字段" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="itemSubmititemForm">确 定</el-button> -->
        <el-button @click="teamDeltailCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改项目对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="ItemTitle"
      :visible.sync="ItemOpen"
      width="500px"
      append-to-body
    >
      <el-form
        ref="itemForm"
        :model="itemForm"
        :rules="itemRules"
        label-width="80px"
      >
        <!-- <el-form-item label="比赛主键" prop="competitionId">
          <el-input
            v-model="itemForm.competitionId"
            placeholder="请输入比赛主键"
          />
        </el-form-item> -->
        <el-form-item label="项目大类">
          <el-select
            v-model="itemForm.type"
            filterable
            allow-create
            default-first-option
            placeholder="请选择项目大类"
            @change="changeType"
          >
            <el-option
              v-for="item in typeDic"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="具体项目" prop="name">
          <el-select
            v-model="itemForm.name"
            filterable
            allow-create
            default-first-option
            placeholder="请选择具体项目"
          >
            <el-option
              v-for="item in projectDic"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运动员最小人数" prop="athleteSumMin">
          <el-input
            v-model="itemForm.athleteSumMin"
            placeholder="请输入运动员最小人数"
          />
        </el-form-item>
        <el-form-item label="运动员最大人数" prop="athleteSumMax">
          <el-input
            v-model="itemForm.athleteSumMax"
            placeholder="请输入运动员最大人数"
          />
        </el-form-item>
        <el-form-item label="报名费" prop="entryPrice">
          <el-input v-model="itemForm.entryPrice" placeholder="请输入报名费" />
        </el-form-item>
        <!-- <el-form-item label="排序字段" prop="sort">
          <el-input v-model="itemForm.sort" placeholder="请输入排序字段" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="itemSubmititemForm">确 定</el-button>
        <el-button @click="itemCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
  <!-- </el-tab-pane> -->
  <!-- <el-tab-pane label="项目管理" name="second"> </el-tab-pane>
    <el-tab-pane label="音乐管理" name="third">音乐管理</el-tab-pane>
  </el-tabs> -->
</template>

<script>
import {
  listplay,
  getplay,
  delplay,
  delplays,
  addplay,
  updateplay,
  getGroupsDic,
} from "@/api/game/play";
import address from "@/api/game/address.json";
import {
  listProject,
  getProject,
  delProject,
  delProjects,
  addProject,
  updateProject,
  getTypeDic,
  getProjectDic,
} from "@/api/game/project";
import { getToken } from "@/utils/auth";
export default {
  name: "play",
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      BaseUrl: process.env.VUE_APP_BASE_API,
      paramsData: {},
      uploadUrl:
        process.env.VUE_APP_BASE_API + "/work/competition/project/import", // 上传
      // project 数据
      fileList: [],
      typeDic: [],
      projectDic: [],
      // 遮罩层
      Itemloading: true,
      teamloading: false,
      // 选中数组
      Itemids: [],
      // 非单个禁用
      ItemItemMultiple: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      ItemShowSearch: true,
      // 总条数
      ItemTotal: 0,
      // 项目表格数据
      projectList: [],
      // 报名情况列表

      teamDetailOpen: false,

      // 弹出层标题
      ItemTitle: "",
      projectTitle: "项目列表",
      teamTitle: "报名列表",
      teamDetailTitle: "详细信息",
      // 是否显示弹出层
      ItemOpen: false,
      // 查询参数
      ItemQueryParams: {
        page: 1,
        rowsPerPage: 10,
        name: null,
        type: null,
      },
      // 表单参数
      itemForm: {},
      teamForm: {},
      // 表单校验
      itemRules: {
        athleteSumMin: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            pattern: /^[1-9]\d*$/,
            message: "必须为大于0的整数",
            trigger: "blur",
          },
        ],
        athleteSumMax: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            pattern: /^[1-9]\d*$/,
            message: "必须为大于0的整数",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "培训项目不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "培训大类不能为空", trigger: "blur" },
        ],
      },

      activeName: "first",
      RaceMode: [
        {
          label: "分站赛",
          id: 0,
        },
        {
          label: "总决赛",
          id: 1,
        },
      ],
      groups: [],
      playStatus: [
        {
          value: 0,
          label: "未开始",
        },
        {
          value: 1,
          label: "报名中",
        },
        {
          value: 2,
          label: "报名结束",
        },
        {
          value: 3,
          label: "待开始",
        },
        {
          value: 4,
          label: "进行中",
        },
        {
          value: 5,
          label: "评分中",
        },
        {
          value: 6,
          label: "已结束",
        },
      ],
      shenheStatus: [
        {
          value: 0,
          label: "草稿",
        },
        {
          value: 1,
          label: "待缴费",
        },
        {
          value: 2,
          label: "待审核",
        },
        {
          value: 3,
          label: "已退回",
        },
        {
          value: 4,
          label: "已通过",
        },
      ],
      //  省数据
      addressData: [],
      //  市数据
      cityData: [],
      // 区数据
      areaData: [],

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 比赛表格数据
      playList: [],

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openItem: false,
      openteam: false,
      // 查询参数
      queryParams: {
        page: 1,
        rowsPerPage: 10,
        name: null,
        type: null,
        groups: null,
        provinceCode: null,
        province: null,
        cityCode: null,
        city: null,
        joinStartTime: null,
        joinEndTime: null,
        startTime: null,
        endTime: null,
        address: null,
        leaderSumMin: null,
        leaderSumMax: null,
        coachSumMin: null,
        coachSumMax: null,
        refereeSumMin: null,
        refereeSumMax: null,
        singleRoomPrice: null,
        standardRoomPrice: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
      },
      // 表单参数
      form: {},
      formItem: {},
      rowId: "",
      // 表单校验
      rules: {
        name: [
          { required: true, message: "赛事名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "赛事名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "赛事类型不能为空", trigger: "blur" },
        ],
        groups: [{ required: true, message: "组别不能为空", trigger: "blur" }],
        province: [
          { required: true, message: "省份不能为空", trigger: "blur" },
        ],
        city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        address: [
          { required: true, message: "详细地址不能为空", trigger: "blur" },
        ],
        leaderSumMin: [
          {
            pattern: /^[0-9]\d*$/,
            message: "必须为整数",
            trigger: "blur",
          },
        ],
        leaderSumMax: [
          {
            pattern: /^[0-9]\d*$/,
            message: "必须为整数",
            trigger: "blur",
          },
        ],
        coachSumMin: [
          {
            pattern: /^[0-9]\d*$/,
            message: "必须为整数",
            trigger: "blur",
          },
        ],
        coachSumMax: [
          {
            pattern: /^[0-9]\d*$/,
            message: "必须为整数",
            trigger: "blur",
          },
        ],
        refereeSumMin: [
          {
            pattern: /^[0-9]\d*$/,
            message: "必须为整数",
            trigger: "blur",
          },
        ],
        refereeSumMax: [
          {
            pattern: /^[0-9]\d*$/,
            message: "必须为整数",
            trigger: "blur",
          },
        ],
        singleRoomPrice: [
          {
            pattern: /^(([0-9]+)|([0-9]+\.[0-9]{0,2}))$/,
            message: "保留两位小数",
            trigger: "blur",
          },
        ],
        standardRoomPrice: [
          {
            pattern: /^(([0-9]+)|([0-9]+\.[0-9]{0,2}))$/,
            message: "保留两位小数",
            trigger: "blur",
          },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      nowPlayId: null,
    };
  },
  created() {
    // 省份数据初始化
    this.addressData = address;
    this.getList();
  },
  methods: {
    filesuccess(res, file, fileList) {
      if (res.code === 200) {
        this.getList();
        this.$message({
          message: "上传项目成功",
          type: "success",
          duration: 1500,
        });
        this.itemGetList(this.nowPlayId);
        this.$refs["upload"].clearFiles();
      } else {
        this.$message({
          message: res.msg,
          type: "error",
          duration: 1500,
        });
      }
      this.$refs["upload"].clearFiles();
      console.log("数据" + res.data);
    },
    // 文件上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    UnderExportOrder() {
      // this.rowId = row.id;
      let params = { competitionId: this.nowPlayId };
      this.paramsData = params;
    },
    handlePreview() {
      console.log("上传前");
      if (!this.nowPlayId) {
        this.$modal.msgError("请先选择赛事");
        return false;
      } else {
        return true;
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${file.name}？`);
    // },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    //项目修改
    handleCheckedDatesChange(e) {
      console.log("项目" + e);
    },

    //添加项目
    addItem(row) {
      this.nowPlayId = row.id;
      this.openItem = true;
      this.itemGetList(row.id);
    },

    //审核参赛队伍
    shenhe(row) {
      this.openteam = true;
      // 根据比赛id获取报名队伍
    },

    closedItem() {
      this.nowPlayId = null;
      console.log("关闭dialog");
    },
    changeType(e) {
      this.itemForm.name = "";
      //过滤小类项目
      var a = this.typeDic.indexOf(e);
      if (a > -1) {
        getProjectDic(e).then((res) => {
          this.projectDic = res.data;
          console.log("小类" + res.data);
        });
      } else {
        this.projectDic = [];
      }
    },
    // 省份更改
    changePro(e) {
      // 省发生改变的时候 清空输入框市区街道的内容
      this.form.city = "";
      // 从省中过滤出市的数据
      this.cityData = this.addressData.filter((item) => {
        return item.name == e;
      })[0].children;

      // this.form.district = "";
      // this.form.city = this.cityData[0].name;
      // 省发生更改时 该表空区街道数据的内容
      // this.areaData = this.cityData[0].children;
      // this.form.district = this.areaData[0].name
    },
    // 市更改
    changeCity(e) {
      // 获取到区的数据
      // this.areaData = this.cityData.filter(
      //   (item) => item.name == e
      // )[0].children;
      // // 清空数据后面对应数组的数据
      // this.form.district = this.areaData[0].name;
    },
    // 区更改
    // changeArea(e) {
    //   let temp = this.areaData.filter((item) => item.name == e);
    //   // 获取到区的code码
    //   this.form.regionalNumber = temp[0].code;
    //   // 获取到街道的数据
    //   this.jdData = this.areaData.filter((item) => item.name == e)[0].children;
    // },

    /** 查询比赛列表 */
    getList() {
      this.loading = true;
      listplay(this.queryParams).then((response) => {
        this.playList = response.data.list;
        this.total = response.data.totalCount;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelProject() {
      this.openItem = false;
    },
    //关闭审核
    cancelTeam() {
      this.openteam = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        type: [],
        groups: null,
        provinceCode: null,
        province: null,
        cityCode: null,
        city: null,
        joinStartTime: null,
        joinEndTime: null,
        startTime: null,
        endTime: null,
        address: null,
        leaderSumMin: null,
        leaderSumMax: null,
        leaderPrice: 0,
        coachPrice: 0,
        coachSumMin: null,
        coachSumMax: null,
        refereeSumMin: null,
        refereeSumMax: null,
        singleRoomPrice: 0,
        standardRoomPrice: 0,
        status: "未开始",
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      getGroupsDic().then((res) => {
        this.groups = res.data;
      });
      this.title = "添加比赛";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getplay(id).then((response) => {
        this.form = response.data;
        if (response.data.groups) {
          let group = response.data.groups.split(",");
          this.form.groups = group;
        } else {
          this.form.groups = [];
        }

        this.open = true;
        this.title = "修改比赛";
      });
      getGroupsDic().then((res) => {
        this.groups = res.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            if (this.form.groups) {
              this.form.groups = this.form.groups.join(",");
            }

            updateplay(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            if (this.form.groups) {
              this.form.groups = this.form.groups.join(",");
            }
            addplay(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      if (row.id) {
        this.$modal
          .confirm('是否确认删除比赛编号为"' + id + '"的数据项？')
          .then(function () {
            return delplay(id);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else if (!row.id && this.ids) {
        const ids = this.ids.join(",");
        this.$modal
          .confirm('是否确认删除比赛编号为"' + ids + '"的数据项？')
          .then(function () {
            return delplays(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "game/play/export",
        {
          ...this.queryParams,
        },
        `play_${new Date().getTime()}.xlsx`
      );
    },

    // project方法

    /** 查询项目列表 */
    itemGetList(id) {
      this.Itemloading = true;
      listProject(id).then((response) => {
        this.projectList = response.data;
        // this.Itemtotal = response.data.totalCount;
        this.Itemloading = false;
      });
    },
    // 取消按钮
    itemCancel() {
      this.ItemOpen = false;
      this.itemReset();
    },
    // 表单重置
    itemReset() {
      this.itemForm = {
        id: null,
        competitionId: null,
        name: null,
        type: null,
        athleteSumMin: null,
        athleteSumMax: null,
        entryPrice: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
      };
      this.resetForm("itemForm");
    },
    // 审核表单
    teamReset() {
      this.teamForm = {
        id: null,
        competitionId: null,
        competitionName: null,
        status: null,
        cost: null,
        joinTime: null,
        otherIds: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
      };
      this.resetForm("teamForm");
    },
    // 审核取消
    teamDeltailCancel() {
      this.teamDetailOpen = false;
      this.teamReset();
    },
    /** 搜索按钮操作 */
    itemHandleQuery() {
      this.ItemQueryParams.page = 1;
      this.itemGetList();
    },
    /** 重置按钮操作 */
    itemResetQuery() {
      this.resetForm("queryitemForm");
      this.itemHandleQuery();
    },
    // 多选框选中数据
    itemHandleSelectionChange(selection) {
      this.Itemids = selection.map((item) => item.id);
      this.ItemItemMultiple = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    itemHandleAdd() {
      this.itemReset();
      this.getItemTypeDic();
      this.ItemOpen = true;
      this.ItemTitle = "添加项目";
    },
    /** 修改按钮操作 */
    itemHandleUpdate(row) {
      this.itemReset();
      const id = row.id || this.Itemids;
      this.getItemTypeDic();
      getProject(id).then((response) => {
        console.log(response.data);
        this.itemForm = response.data;
        this.ItemOpen = true;
        this.ItemTitle = "修改项目";
      });
    },
    //审核详细信息
    teamHandleUpdate(row) {
      this.teamReset();
      const id = row.id;
      //获取报名详细信息
      this.teamForm = {
        id: "168247941277966",
        title: "null-山东省电竞比赛2023",
        competitionId: "1",
        competitionName: "山东省电竞比赛2023",
        leaderIds: "168221289232290",
        coachIds: "168221275660354",
        refereeIds: "168223577606866",
        otherIds: "168230202964142",
        joinTime: null,
        singleRoomPresonSum: 6,
        standardRoomPersonSum: 6,
        entryCost: null,
        cost: null,
        province: "山东省",
        status: "草稿",
        createBy: "队伍甲",
        createTime: "2023-04-26 11:23:33",
        updateBy: null,
        updateTime: null,
        sort: 1682479412783,
        leaders: null,
        coachs: null,
        referees: null,
        others: null,
        filePayUrl: null,
        filePayName: null,
        fileId: null,
        projects: null,
      };
      this.teamDetailOpen = true;
      // this.teamDetailTitle = "修改项目";
    },
    // getTypeDic
    getItemTypeDic() {
      getTypeDic().then((res) => {
        this.typeDic = res.data;
        console.log(res.data);
      });
    },
    /** 提交按钮 */
    itemSubmititemForm() {
      this.$refs["itemForm"].validate((valid) => {
        if (valid) {
          if (this.itemForm.id != null) {
            updateProject(this.itemForm).then((response) => {
              this.$modal.msgSuccess("修改成功");

              console.log("playId" + this.nowPlayId);
              this.itemGetList(this.nowPlayId);
              this.ItemOpen = false;
            });
          } else {
            this.itemForm.competitionId = this.nowPlayId;
            addProject(this.itemForm).then((response) => {
              this.$modal.msgSuccess("新增成功");

              console.log("playId" + this.nowPlayId);
              this.itemGetList(this.nowPlayId);
              this.ItemOpen = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    itemHandleDelete(row) {
      if (row.id) {
        this.$modal
          .confirm('是否确认删除项目编号为"' + row.id + '"的数据项？')
          .then(function () {
            return delProject(row.id);
          })
          .then(() => {
            this.itemGetList(this.nowPlayId);
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else if (!row.id && this.Itemids) {
        const Itemids = this.Itemids;
        this.$modal
          .confirm('是否确认删除项目编号为"' + Itemids + '"的数据项？')
          .then(function () {
            return delProjects(Itemids);
          })
          .then(() => {
            this.itemGetList(this.nowPlayId);
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },

    //出场顺序模板表下载
    underOrder() {
      this.downloadFile(
        "/work/competition/project/downloadTemplate",
        null,
        `导入项目模板下载.xlsx`
      );
    },
  },
};
</script>
<style lang="less"  scoped>
/deep/ .scrollbar {
  overflow-y: scroll;
  // white-space: nowrap;  //强制一行显示（看需要）
  .el-scrollbar {
    display: flex;
    justify-content: space-around;
    padding: 0 10px;
  }
  /deep/ .el-scrollbar__wrap {
    // 必要的
    overflow: scroll;
    width: 110%; //隐藏侧边默认滚动条 （达不到效果可以自己试着微调） 如解决不了可尝试用 `margin-right -60px`
    height: 100%; //隐藏底部滚动条  （100%如果达不到效果可以试着用110%）
  }
}
body .el-scrollbar__wrap {
  overflow-x: hidden;
}
.pickerSpan {
  margin: 0 10px;
}
</style>